<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import apiUser from '@/api/user'

// 响应式数据
const phoneNumber = ref('')
const verifyCode = ref('')
const countdown = ref(0)

// 计算属性
const canSubmit = computed(() => {
  return phoneNumber.value.length === 11 && verifyCode.value.length >= 4
})

// 倒计时定时器
let timer: any = null

// 方法
function goBack() {
  uni.navigateBack()
}

async function getVerificationCode() {
  if (countdown.value > 0 || !phoneNumber.value)
    return

  // 验证手机号格式
  const phoneReg = /^1[3-9]\d{9}$/
  if (!phoneReg.test(phoneNumber.value)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none',
    })
    return
  }

  // 开始倒计时
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)

  const success = await apiUser.sendcodeBind({ mobile: phoneNumber.value })
  console.log('success', success)
  console.log('获取验证码:', phoneNumber.value)

  uni.showToast({
    title: '验证码已发送',
    icon: 'success',
  })
}

function handleNext() {
  if (!canSubmit.value)
    return

  // 这里调用验证接口
  console.log('验证手机号:', phoneNumber.value, '验证码:', verifyCode.value)

  // 验证成功后跳转到下一页
  // uni.showToast({
  //   title: '验证成功',
  //   icon: 'success',
  // })

  // 模拟跳转
  setTimeout(() => {
    uni.navigateTo({
      url: `/pages/user/newMobile?oldCode=${verifyCode.value}`,
    })
  }, 1500)
}

// 组件卸载时清除定时器
onMounted(() => {
  // 页面加载完成
})

// 页面卸载
function onUnload(p0: () => void) {
  if (timer) {
    clearInterval(timer)
  }
}

// 注册页面生命周期
onUnload(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<template>
  <view class="min-h-screen bg-[#f7f7f7] pt-3">
    <!-- 主要内容 -->
    <view class="mx-3 rounded-2 bg-white px-3 pt-3">
      <!-- 标题和描述 -->
      <view class="mb-12">
        <view class="mb-2 text-6 text-gray-800 font-medium">请输入原手机号</view>
        <view class="text-3.5 text-gray-500">通过安全环境验证后以换绑</view>
      </view>

      <!-- 表单区域 -->
      <view class="mb-12">
        <!-- 手机号输入 -->
        <view class="mb-6 px-4">
          <wd-input
            v-model="phoneNumber"
            placeholder="请输入原手机号"
            type="number"
            :maxlength="11"
            clearable
            :border="false"
            input-style="background-color: #F9F9F9;"
          />
        </view>

        <!-- 验证码输入 -->
        <view class="mb-6 px-4">
          <wd-input
            v-model="verifyCode"
            placeholder="请输入验证码"
            type="number"
            :maxlength="6"
            :border="false"
            input-style="background-color: #F9F9F9;"
          >
            <template #suffix>
              <view class="flex items-center">
                <view class="text-gray-500">|</view>
                <view
                  class="get-code-btn flex-shrink-0 cursor-pointer px-2 py-1 text-3.5"
                  :class="countdown > 0 || !phoneNumber ? 'text-gray-500 cursor-not-allowed' : 'text-red-500'"
                  @click="getVerificationCode"
                >
                  {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
                </view>
              </view>

            </template>
          </wd-input>
        </view>
      </view>

      <!-- 下一步按钮 -->
      <view class="px-2">
        <wd-button
          type="error"
          size="large"
          round
          block
          :disabled="!canSubmit"
          @click="handleNext"
        >
          下一步
        </wd-button>
      </view>
    </view>
  </view>
</template>

  <style>
  /* WotUI 组件自定义样式 */
:deep(.wd-input) {
  --wd-input-padding: 16px 0;
  --wd-input-font-size: 16px;
  --wd-input-placeholder-color: #c8c8c8;
}

:deep(.wd-button) {
  --wd-button-error-bg: #e53e3e;
  --wd-button-error-border-color: #e53e3e;
  --wd-button-large-height: 50px;
  --wd-button-large-font-size: 16px;
  font-weight: 500;
}

:deep(.wd-button.is-disabled) {
  --wd-button-error-bg: #ccc;
  --wd-button-error-border-color: #ccc;
}

.get-code-btn:not(.disabled):active {
  opacity: 0.6;
}

:deep(.wd-input__value) {
  background-color: #f9f9f9;
  padding: 28rpx;
  border-radius: 10rpx;
}
</style>
